#fileDetail {
	@include flexbox();
	@include flex-direction(column);
	height: 100%;
	background: rgba(255,255,255,1);
	header {
        @include flexbox();
		height: 45px;
        line-height: 45px;
        color: #fff;
        background: linear-gradient(to right, #2fd4ac,  #2fd492);
		i {
			width: 30px;
			background: url(image/icon_return.png) no-repeat center;
			background-size: 100%;
		}
		div {
			@include flex();
			text-align: center;
			font-size: 18px;
			margin-right: 30px;
		}
	}
	.mc {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		position: fixed;
		z-index: 2;
		.courseList {
			position: absolute;
			width: 90%;
			height: auto;
			max-height: 60%;
			border-radius: 12px;
			top: 40%;
			left: 50%;
			transform: translate(-50%,-50%);
			background: #fff;
			overflow-y: scroll;
			padding: 10px 3px;
			li {
				@include flexbox();
				@include justify-content(center);
				@include align-content(center);
				height: 42px;
				line-height: 42px;
				margin: 0 8px;
				border-bottom: 1px solid rgba(223,223,223,1);
				background: #fff;
				&.active {
					background: #3879D9;
				}
				img {
					margin-top: auto;
					margin-bottom: auto;
					margin-left: 5px;
				}
				i {
					@include flex();
					text-align: left;
					padding-left: 6px;
					font-size: 14px;
					overflow: hidden;
					color: rgba(51,51,51,1);
				}
			}
		}
	}
	.border-8 {
		width: 100%;
		height: 8px;
		background: #F6F6F6;
	}
	.box {
		@include flex();
		width: 100%;
		padding: 0 15px;
		overflow-y: scroll;
		p {
			font-size: 15px;
			color: rgba(51,51,51,1);
			margin-top: 15px;
		}
		table {
			width:100%;
			font-size: 14px;
			border: 1px solid rgba(223,223,223,1);
			tr {
				th {
					height: 30px;
					line-height: 30px;
					color: rgba(51,51,51,1);
					text-align: center;
					font-weight: normal;
					font-size: 14px;
					background: #E4E3E3;
				}
				td {
					height: 30px;
					line-height: 30px;
					color: rgba(51,51,51,1);
					text-align: center;
					font-size: 14px;
                    background: #F9F8F8;
                    white-space: nowrap;
					    text-overflow: ellipsis;
                        overflow: hidden;
					&:nth-of-type(2) {
						&.goodSound {
							background-image: url(image/icon_quality_standard.png);
							background-repeat: no-repeat;
							background-size: 15px;
							background-position: 3px center;
						}

					}
					&:nth-of-type(3) {
							background-image: url(image/icon_trash.png);
							background-repeat: no-repeat;
							background-size: 15px;
							background-position: center;
					}

				}
			}
		}
		&>div.add_course {
			margin-top: 15px;
			@include flexbox();
			span {
				font-size: 14px;
				color: rgba(51,51,51,1);
			}
			div {
				@include flex();
				@include flexbox();
				@include justify-content(center);
				@include align-content(center);
				height: 42px;
				line-height: 42px;
				margin-left: 5px;
				padding-right: 4px;
				border: 1px solid rgba(223,223,223,1);
				img {
					margin-top: auto;
					margin-bottom: auto;
					margin-left: 5px;
				}
				i {
					@include flex();
					text-align: left;
					font-size: 14px;
					overflow: hidden;
					color: rgba(51,51,51,1);
					padding-left: 6px;
					padding-right: 20px;
					background: url(image/bottomArrow.jpg) no-repeat right center;
					background-size: 15px;
				}
			}
		}
		.creatNewCourse {
			margin-top: 5px;
			width: 108px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			border-radius: 15px;
            font-size: 15px;
            background: linear-gradient(to bottom, #6c4e3c, #543c2e);
			color: #f6c308;
			float: right;
			i {
				font-size: 30px;
				line-height: 32px;
				float: left;
				margin-left: 5px;
			}
			span {
				margin-left: -5px;
			}
		}
		&>div.perfect_info {
			margin-top: 16px;
			margin-bottom: 47px;
			@include flexbox();
			span {
				font-size: 14px;
				color: rgba(51,51,51,1);
			}
			&>div {
				@include flex();
				height: 70px;
				margin-left: 5px;
				font-size: 14px;
				color: rgba(51,51,51,1);
				textarea {
					resize: none;
					border: 1px solid rgba(223,223,223,1);
					width: 100%;
					height: 40px;
					padding: 10px;
					z-index: 1;
				}
				div {
					font-size: 14px;
					color: rgba(156,156,156,1);
					line-height: 1.2;
				}
			}
		}
		label.rule {
			display: block;
			width: 230px;
			font-size: 14px;
			margin: auto;
			text-align: right;
			color: rgba(122,122,122,1);
			background-position: 0px center;
			position: relative;
			input[type='radio'] {
                opacity: 0;
                position: absolute;
            }
            input[type='radio']+i {
            	position: absolute;
                display: inline-block;
				left: 0;
                width: 15px;
                height: 19px;
                background: url(image/icon_agree_normal.png) no-repeat center;
                background-size: 15px;
            }
            input[type='radio']:checked+i {
                background: url(image/icon_agree_click.png) no-repeat center;
                background-size: 15px;
            }
			.blue {
				color: rgba(21,142,218,1);
			}
		}
		div.btn {
			@include flexbox();
			width: 213px;
			margin: 20px auto;
			a {
				display: inline-block;
				width: 94px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				color: #fff;
				border-radius: 17px;
				&.sendBtn {
					background: rgba(229,50,45,1);
					margin-right: 25px;
				}
				&.cancelBtn {
					background: rgba(226,226,226,1);
				}
			}

		}
	}
}